<div class="{{ prefixListCls }}-line">
  <div #lableContent [ngClass]="labelCls">
    <ng-template *ngIf="isTemplateRef(content)" [ngTemplateOutlet]="content"></ng-template>
    <ng-container *ngIf="!isTemplateRef(content)">{{ content }}</ng-container>
  </div>
  <div [ngClass]="controlCls">
    <CustomInput
      *ngIf="type === 'money'"
      [value]="value"
      [defaultValue]="defaultValue"
      [placeholder]="placeholder"
      [disabled]="disabled"
      [editable]="editable"
      [fontColor]="fontColor"
      [moneyKeyboardAlign]="moneyKeyboardAlign"
      [setFocus]="setFocus"
      [maxLength]="maxLength"
      (onChange)="inputChange($event)"
      (onBlur)="inputBlur(value)"
      (onFocus)="inputFocus(value)"
    >
    </CustomInput>
    <div *ngIf="type !== 'money'">
      <input
        #inputElement
        style="outline:none"
        [type]="type"
        [name]="name"
        [(ngModel)]="value"
        [defaultValue]="defaultValue"
        [placeholder]="placeholder"
        [disabled]="disabled"
        [readOnly]="!editable"
        [autofocus]="autoFocus"
        [maxlength]="maxLength"
        [pattern]="pattern"
        [style.color]="fontColor"
        (ngModelChange)="inputChange($event)"
        (compositionstart)="compositionStart()"
        (compositionend)="compositionEnd()"
        (blur)="inputBlur(value)"
        (focus)="inputFocus(value)"
      />
    </div>
  </div>
  <div
    *ngIf="clear && editable && !disabled && (value && value.length > 0)"
    class="{{ prefixCls }}-clear"
    (click)="clearInput()"
  ></div>
  <div *ngIf="error" class="{{ prefixCls }}-error-extra" (click)="errorClick($event)"></div>
  <div *ngIf="extra !== ''" class="{{ prefixCls }}-extra" (click)="extraClick($event)">
    <ng-container *ngIf="!ngTemplate">{{ extra }}</ng-container>
    <ng-template *ngIf="ngTemplate" [ngTemplateOutlet]="extra"></ng-template>
  </div>
</div>
